<template>
  <div class="container">
    <div class="category-list">
      <div
        :class="{ category: true, active: currentCategory === item.id }"
        v-for="(item, index) in categoryList"
        :key="index"
        @click="category(item.id, item.dynamic_name)"
      >
        {{ item.dynamic_name }}
      </div>
    </div>
  </div>
</template>

<script>
import { getDynamicClassify } from "@/api/dynamics";
export default {
  data() {
    return {
      categoryList: [], //种类列表
      currentCategory: null
    };
  },
  methods: {
    //监听点击某动态种类
    category(categoryId, dynamicName) {
      this.currentCategory = categoryId; //控制样式
      let categoryObj = {};
      categoryObj.classifyId = categoryId;
      categoryObj.dynamicName = dynamicName;
      this.$emit("classify", categoryObj);
    },
    //获取动态分类列表
    getCategoryList() {
      getDynamicClassify().then(res => {
        if (res.status === 200) {
          this.categoryList = res.data.data;
        }
      });
    }
  },
  mounted() {
    this.getCategoryList();
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow: auto;
  background: #fff;

  .category-list {
    display: flex;
    padding: 0 3.2%;
    flex-wrap: wrap;
    
    .category {
      font-size: 0.64rem;
      color: #666666;
      width: 29%;
      border: 1px solid rgba(187, 187, 187, 1);
      border-radius: 0.16rem;
      padding: 0.5rem 0;
      text-align: center;
      line-height: 0.64rem;
      margin: 0.72rem 2% 0;
    }

    .active {
      color: rgba(51, 147, 255, 1);
      border: 1px solid rgba(51, 147, 255, 1);
    }
  }
}
</style>
